<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>GPS轨迹</title>
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/gps.css?v=333">
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
	</head>
	<body>
		<div class="main-page">
			<div class="page-body flex">
				<div class="sub-page-container">
					
					<div class="right-content-wrapper">
						<div class="right-content-box">
							<ul class="tags">
								<li>清洁运输</li>
								<li>&gt;</li>
								<li>GPS轨迹</li>
							</ul>
							<div class="content-section flex page-gps">
								<div class="table-section">
									<div class="card-header">
										GPS轨迹
									</div>
									<div class="card-content flex">
										<div class="table-gps flex">地图区域</div>
										<div class="left-box">
											<ul class="inp-box tools">
												<li class="platfrom pdl-20"></li>
												<li>
													<div class="date-input" id="dateBtn"><input type="text" id="date"
															autocomplete="off" placeholder="请输入查询日期"></div>
												</li>
											</ul>
											<button class="search" type="button">搜索</button>
											<div class="butt-box">
												<button class="gree" type="button">开始</button>
												<button class="org" type="button">停止</button>
												<button class="bul" type="button">暂停</button>
											</div>
											<div class="share">
												<span>调</span><span>度</span><span>信</span><span>息</span>
											</div>
										</div>
									</div>
								</div>
								<div class="shade-box scale-in-hor-center">
									<table class="table mgb-10">
										<thead>
											<tr class="table-tr">
												<th class="table-1">清扫车名称</th>
												<th>车辆状态</th>
												<th>车速</th>
												<th>报警点位</th>
												<th>调度时间</th>
												<th>调度信息</th>
											</tr>
										</thead>
										<tbody class="tbody">
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>

											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>

											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>

											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>

											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
											<tr>
												<td>建邦铸造清扫机</td>
												<td>停车</td>
												<td>0</td>
												<td>循环水池东侧放灰口</td>
												<td>2021-03-12 22:16</td>
												<td>2号炉区循环水池东侧放灰口扬尘浓度过高，</td>
											</tr>
										</tbody>
									</table>
									<div class="pagination-section flex">
										<div id="pagination"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/browser.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/select.js"></script>
		<script>
			var pageObj = function(){
				this.init()

				// 渲染底部菜单
				new Footer({
			        el:".main-page",
			        curMenu:"清洁运输",
			        size:4,
			        menus:[
			            {href:"有组织.html",text:"有组织"},
			            {href:"无组织.html",text:"无组织"},
			            {href:"车辆出入.html",text:"清洁运输"},
			            {href:"视频.html",text:"视频大厅"}
			        ]
			    });

				// 渲染左侧菜单树
			    new LeftSiderMenu({
			        el:".sub-page-container",
			        size:10,
			        curMenu:"车辆出入",
			        menus:[
			        	{ href:"概览.html",text:"概览" },
			            {href:"车辆出入.html",text:"车辆出入"},
			            {href:"车辆清洗.html",text:"车辆清洗"},
			            {href:"车辆苫盖.html",text:"车辆苫盖"},
			            {href:"车辆排放.html",text:"车辆排放"},
			            {href:"GPS轨迹.html",text:"GPS轨迹"}
			        ]
			    });
			}
			pageObj.prototype.init = function(){
				this.bindEvent();
			}
			pageObj.prototype.bindEvent = function(){
				let self = this;
				// 处理table样式兼容火狐游览器
				if(browser.type != "Chrome"){
					$(".tbody").height($(".card-content").height() - 48);
				}

				layui.use(['laypage', 'laydate'], function(){
					let laypage = layui.laypage;
					let laydate = layui.laydate;

					laypage.render({
					    elem: 'pagination'
					    ,count: 20
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] 
					    ,jump: function(obj){
					      	console.log(obj)
					    }
				  	});

				  	laydate.render({
					    elem: '#dateBtn'
					    ,type: 'datetime'
					    ,done: function(value, date){
						    $("#date").val(value)
						}
					});
				})

				$(window, document).resize(function (){
				 	if(browser.type == "Firefox"){
						$(".tbody").height($(".card-content").height() - 48);
					}
				});

				// 自定义下拉框option点击事件
				new SelectPlus({
					el: ".platfrom",
					data: [
						{ value: "", text: "请选择" },
						{ value: 1, text: "东大门" },
						{ value: 2, text: "东大门" },
						{ value: 3, text: "东大门" }
					],
					done: function (row) {
						console.log(row);
					}
				})

				$("body").on("click", ".left-box .share", function (e) {
					$(".shade-box").toggleClass("show");

					if ($(this).hasClass("on")) {
						$(this).removeClass("on");
						$(this).html("<span>调</span><span>度</span><span>信</span><span>息</span>");
						$(".card-header").html("GPS轨迹")
						
						$(".tags").html(`<li>清洁运输</li><li>&gt;</li><li>GPS轨迹</li>`);
						
					} else {
						$(this).addClass("on");
						$(this).html(`<span>GPS</span><span>轨</span><span>迹</span>`);
						$(".card-header").html("调度信息")
						$(".tags").append(`<li>&gt;</li><li>调度信息</li>`);
					}
				})
			}
			new pageObj();
		</script>
	</body>
</html>
